<template>
	<view class="page">
		<view class="hedaer">
			<view class="hedaer_left">
				<view class="icon" style="width: 44rpx;height: 44rpx;">
					<img src="@/static/ke_hu/fang.png" alt="" style="width: 100%;height: 100%;">
				</view>
				<view class="icon_right">
					<view class="tps">
						账号进件总计
					</view>
					<view class="icon_right_n">
						{{count||'0'}}
					</view>
				</view>
			</view>
			<view class="hedaer_left" style="background-color: #456EFE;">
				<view class="icon" style="width: 44rpx;height: 44rpx;">
					<img src="@/static/ke_hu/jian.png" alt="" style="width: 100%;height: 100%;">
				</view>
				<view class="icon_right">
					<view class="tps" style="color: #B7C6FF;">
						放款金额总计
					</view>
					<view class="icon_right_n">
						{{price||'0'}}元
					</view>
				</view>
			</view>
		</view>
		<view class="banner_right">
			<view class="banner_right_items" v-for="(t,i) in du" :key="i" :class="[duIndex == i ? 'jisn' : '']"
				@click="selecType(i)">
				{{t.title}}
			</view>
		</view>

		<!-- 		<view class="order" style="margin-top: 38rpx;">
			<view class="order_title_box">
				<view class="order_left" style="margin-top: 20rpx;">
					<view class="order_title">
						销售占比
					</view>
				</view>
				<view class="order_right" @click="xiaoshou">
					更多数据
				</view>
			</view>
			<xiao-shou-zhan-bi ref="xiaoshouzhanbi" />
		</view> -->


		<view class="jingxiaoshang" @click="jinxiaos">
			<view class="jingxiaoshang_title">
				销售数据
			</view>
			<view class="more">
				更多数据
			</view>
		</view>

		<view class="" v-if="xiaoShouData.length > 0">
			<view class="items" v-for="(items,index) in xiaoShouData" :key="index" @click="goteails(items.saleId)">
				<view class="items_left" :class="[changeBgc(index+1)]">
					{{index + 1}}
				</view>
				<view class="items_right">
					<view class="items_right_t">
						<span>{{items.name ||''}}</span>
						<span style="color: #31AB3F;">{{items.share ? `${items.share}%` : ''}}</span>
					</view>
					<view class="items_right_b">
						<span>进件总计：{{items.count || '0'}}</span>
						<span style="margin-left: 36rpx;">放款总额：{{items.price ? `￥${items.price}` : 0}}</span>
					</view>
				</view>
			</view>
		</view>
		<view class="kong" v-else>
			<u-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/car.png" text="暂无数据">
			</u-empty>
		</view>

	</view>
</template>

<script>
	import xiaoShouZhanBi from "./jing_shao_xiao_shou_zhan_bi._bing_tu";
	export default {
		components: {
			xiaoShouZhanBi,
		},
		data() {
			return {
				type: 1,
				dateTips: '',
				show: false,
				du: [{
					title: '全部'
				}, {
					title: '今日数据'
				}, {
					title: '月度数据'
				}],
				duIndex: 0,
				day: null,
				dataList: [],
				count: 0,
				price: 0,
				xiaoShouData: [],
				xiaoShouZhanBiData: []
			}
		},
		onLoad() {

		},
		methods: {
			load() {
				this.getDate()
			},
			// 获取当前时间
			async getDate() {
				let D = new Date()
				let year = (D.getFullYear() + '').padStart(2, '0')
				let M = (D.getMonth() + 1 + '').padStart(2, '0')
				let t = (D.getDate() + '').padStart(2, '0')
				this.day = `${year}-${M}-${t}`
				// this.$refs.xiaoshouzhanbi.type = this.type
				// this.$refs.xiaoshouzhanbi.day = this.day
				// this.$refs.xiaoshouzhanbi.getXiaoShouZhanBi()
				this.getxiaoShouData()
				const res = await this.$post(`/biz/distributorStatistics/jinjianandfangkuan`, {
					time: this.day,
					type: this.type
				})
				if (res.statusCode == 200) {
					this.price = res.data.data.price
					this.count = res.data.data.count
				}

			},
			changeBgc(val) {
				let bgc = ''
				if (val == 1) {
					bgc = 'chengSe'
				} else if (val == 2) {
					bgc = 'lvSe'
				} else if (val == 3) {
					bgc = 'hongSe'
				} else if (val == 4) {
					bgc = 'heiSe'
				} else if (val == 5) {
					bgc = 'ziSe'
				} else {
					// 默认色
					bgc = 'moren'
				}
				return bgc
			},
			// 获取销售数据
			async getxiaoShouData() {
				const res = await this.$post(`/biz/distributorStatistics/salestop5`, {
					time: this.day,
					type: this.type
				})
				if (res.statusCode == 200) {
					this.xiaoShouData = res.data.data
				}
			},

			confirm(e) {
				this.dateTips = e[0]
				this.show = false
			},
			// 去销售详情
			goteails(saleId) {
				uni.navigateTo({
					url: `/pages/zong_gong_si/dian_xiao_xiang_qing?saleId=${saleId}&price=${this.price}`
				})
			},
			selecType(index) {
				this.duIndex = index;
				if (index == 0) {
					this.type = 1
					this.day = ''
				} else if (index == 1) {
					this.type = 2
					let D = new Date()
					this.day = (D.getDate() + '').padStart(2, '0')
				} else if (index == 2) {
					this.type = 3
					let D = new Date()
					this.day = (D.getMonth() + 1 + '').padStart(2, '0')
				}
				this.getDate()
			},
			xiaoshou() {
				uni.navigateTo({
					url: '/pages/jing_xiao__shang/jing_xiao_shang_zhan_bi?zhanBiData=' + JSON.stringify(this.$refs
						.xiaoshouzhanbi.xiaoShouZhanBiData)
				})
			},
			jinxiaos() {
				uni.navigateTo({
					url: '/pages/jing_xiao__shang/jing_xiao_shang_pai_hang?price=' + this.price
				})
			},
			goteails(saleId) {
				if (saleId) { //如果saleId存在就跳往经销商销售排行，否则查看全部经销商
					uni.navigateTo({
						url: `/pages/jing_xiao__shang/jing_xiao_shang_xiao_shou_pai_hang?saleId=${saleId}&price=${this.price}`
					})
				} else {
					this.jinxiaos()
				}

			}

		}
	}
</script>

<style>
	.page {
		overflow-y: auto;
		width: 100%;
		height: 100vh;
		background-color: #fff;
		padding: 0 30rpx 60rpx;
		box-sizing: border-box;
	}

	.hedaer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 146rpx;
		margin-top: 24rpx;
	}

	.hedaer_left {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		width: 336rpx;
		height: 146rpx;
		background: #1CCD9D;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.icon {
		border-radius: 50%;
		background-color: #fff;
		margin: 15rpx 20rpx 0 15rpx;
	}

	.selectBox {
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 50rpx;
		/* background: #F2F2F2;
		border-radius: 12rpx 12rpx 12rpx 12rpx; */
		/* background-color: red; */
		margin-top: 36rpx;
	}

	.icon_right {
		margin-top: 20rpx;
	}

	.tps {
		height: 33rpx;
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #BFFFEE;
	}

	.icon_right_n {
		height: 50rpx;
		font-size: 36rpx;
		font-family: 'PingFang SC-Medium, PingFang SC';
		font-weight: 500;
		color: #FFFFFF;
		line-height: 22rpx;
		margin-top: 10rpx;
	}

	.banner_right {
		padding: 0 11rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 690rpx;
		height: 90rpx;
		background: #F2F2F2;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin-top: 32rpx;
	}

	.banner_right_items {
		text-align: center;
		width: 334rpx;
		height: 68rpx;

		border-radius: 12rpx 12rpx 12rpx 12rpx;
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #202122;
		line-height: 68rpx;
	}

	.jisn {
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 5rpx 1rpx rgba(0, 0, 0, 0.06);
		color: #5885F9;
	}

	.order {
		padding: 21rpx 30rpx;
		box-sizing: border-box;
		width: 690rpx;
		/* height: 687rpx; */
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 48rpx 1rpx rgba(188, 188, 188, 0.16);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-top: 29rpx;
		/* background-color: red; */
	}

	.order_title {
		height: 37rpx;
		font-size: 26rpx;

		font-weight: bold;
		color: #333333;
		line-height: 37rpx;
	}

	.order_info {
		height: 26rpx;
		font-size: 19rpx;
		font-family: 'PingFang SC-Bold, PingFang SC';
		font-weight: 400;
		color: #333333;
		line-height: 26rpx;
		margin: 5rpx 0 34rpx;
	}

	.items {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 706rpx;
		height: 139rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 48rpx 1rpx rgba(0, 0, 0, 0.04);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		margin: 26rpx auto 0;
		/* background-color: chocolate; */
	}

	.items_left {
		width: 87rpx;
		height: 87rpx;
		background: #F89751;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 26rpx 0 26rpx;
		font-size: 50rpx;
		font-family: 'FZZongYi-M05S-Regular, FZZongYi-M05S';
		font-weight: 400;
		color: #FFFFFF;
		line-height: 87rpx;
		text-align: center;
	}

	.items_right {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		flex-direction: column;
		width: 527rpx;
		height: 100%;
		/* background-color: red; */
	}

	.items_right_b {
		margin-top: 14rpx;
		height: 33rpx;
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #9E9E9E;
		line-height: 33rpx;
	}

	.items_right_t {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 37rpx;
		height: 37rpx;
		font-size: 26rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #27292C;
		line-height: 37rpx
	}
	.moren {
		background-color: #2b85e4;
	}

	.chengSe {
		background-color: #F89751;
	}

	.lvSe {
		background-color: #31AB3F;
	}

	.hongSe {
		background-color: #FB5951;
	}

	.heiSe {
		background-color: #361B32;
	}

	.ziSe {
		background-color: #6947DE;
	}

	.selectBoxTitle {
		height: 42rpx;
		font-size: 30rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #535353;
		line-height: 42rpx;
	}

	.date {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.dateTips {
		height: 42rpx;
		font-size: 30rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #535353;
		line-height: 42rpx;
		margin-right: 28rpx;
	}

	.jingxiaoshang {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 690rpx;
		height: 45rpx;
		margin: 51rpx auto 18rpx;
	}

	.jingxiaoshang_title {
		font-size: 30rpx;
		font-family: ' PingFang SC-Bold, PingFang SC';
		font-weight: bold;
		color: #333333;
	}

	.more {
		height: 33rpx;
		font-size: 24rpx;
		font-family: ' PingFang SC-Bold, PingFang SC';
		font-weight: bold;
		color: #15499A;
	}

	.order_right {
		height: 33rpx;
		font-size: 24rpx;
		font-family: 'PingFang SC-Bold, PingFang SC';
		font-weight: bold;
		color: #15499A;
		line-height: 33rpx;
		margin-top: 20rpx;
	}

	.order_title_box {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
</style>